<template>
	<view class="invitation-detail h100vh bggray">

		<view v-if="list.length < 1" class="ac mb30 empty-style">
			<image :src="staticImage.empty" class="empty-img"></image>
			<view class="fs28 name-color">暂未邀请新用户</view>
		</view>

		<scroll-view class="list bgcfff" scroll-y @scrolltolower="getList" v-else>
			<view class="item padding30 border-bottom flex fs28 flex-ver flex-sb" v-for="(item,index) in 2" :key="index">
				<view class="flex flex-ver">
					<image :src="staticImage.timeLine" class="img mr20"></image>
					<view>
						<view class="mb14">用户昵称</view>
						<view class="fs25 name-color">邀请时间：12月10日</view>
					</view>
				</view>
				<view class="name-color">未购买水机</view>
			</view>
			<uni-load-more :status="loadingType" class="mx-auto" v-if="!$common._empty(loadingType)"></uni-load-more>
		</scroll-view>

	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';

  import {getScoreList,userBankList,userScoreUsable} from '@/api/user/userScore'
	export default {
		data() {
			return {
				loadingType: '', //加载更多status
				page: 1,
				list: [],
				staticImage: {
					timeLine:this.$common.imgUrl() + '/other/share_quan_icon@2x.png',
					empty:this.$common.imgUrl() + '/other/wode@2x.png',
				}
			}
		},
		components: {
			uniLoadMore,
		},
		async onLoad(query) {
			await this.getList();
		},
		onShow() {},
		mounted() {},
		methods: {
			async getList() {
				if (this.loadingType === "noMore") {
					//防止重复加载
					return;
				}
        getScoreList({
          page: this.page++,
        }).then(res=>{
          this.list = [...this.list, ...res.data.datas];

          if (res.data.datas.length < 20) {
            this.loadingType = "noMore"
          } else {
            this.loadingType = "more"
          }
        })
			}
		}
	}
</script>

<style lang="scss">
	.list {
		height: 100%;
	}

	.item{
		.img{
			width: 76rpx;
			height: 76rpx;
			border-radius: 50%;
		}
	}

	.empty-style{
		position: absolute;
		top:30%;left:50%;
		transform: translate(-50%,0);
	}

	.empty-img{
		width: 99rpx;
		height: 83rpx;
	}
</style>
